<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>images</title>
    <style>
        text {
            text-align: center;
        }

        .name_text {
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }


        @media (max-width: 500px) {

            .a_link {
                display: flex;
                flex-direction: column;
                width: 46%;
                float: left;
                margin: 2%;
            }

            img {
                height: 200px;
                object-fit: cover
            }
        }

        /* 超小屏幕（手机，小于 768px） */
        @media (min-width: 500px) {

            .a_link {
                display: flex;
                flex-direction: column;
                width: 30%;
                float: left;
                margin: 1.66%;
            }

            img {
                height: 200px;
                object-fit: cover
            }
        }

        /* 小屏幕（平板，大于等于 768px） */
        @media (min-width: 700px) {
            .a_link {
                display: flex;
                flex-direction: column;
                width: 23%;
                float: left;
                margin: 1%;
            }

            img {
                height: 260px;
                object-fit: cover
            }
        }

        /* 中等屏幕（桌面显示器，大于等于 992px） */
        @media (min-width:850px) {
            .a_link {
                display: flex;
                flex-direction: column;
                width: 17%;
                float: left;
                margin: 1.5%;
            }

            img {
                height: 260px;
                object-fit: cover
            }
        }

        /* 大屏幕（大桌面显示器，大于等于 1200px） */
        @media (min-width: 1200px) {
            .a_link {
                display: flex;
                flex-direction: column;
                width: 13%;
                float: left;
                margin: 1.75%;
            }

            img {
                height: 260px;
                object-fit: cover
            }
        }

        /*@media (min-width: 1100px) {
.a_link {
            display: flex;
            flex-direction: column;
            width: 12%;
            float: left;
            margin: 2.3%;
        }

        

        img {
            height: 260px;
            object-fit: cover
        }
 }*/
    </style>
</head>

<body>

    <div id="images" style="width: 100%;height: 100%;"></div>
    <script>
        const proto = location.origin.indexOf("https") == 0 ? "https://" : "http://"

        var imageList = []
        var imageParent = document.getElementById("images")
        function parseResult(result) {
            let json;
            if (typeof result === 'string') {
                json = JSON.parse(result);
            } else {
                json = result;
            }
            // const json = JSON.parse(result);
            imageList = json;
            let string = "";
            for (let i = 0; i < json.length; ++i) {
                string += "<a class=\"a_link\" href=" + json[i] + " target=\"_blan\">"
                if (json[i].endsWith(".png") || json[i].endsWith(".jpeg") || json[i].endsWith(".jpg")) {
                    string += "<img src=\"" + json[i] + "\"/>"
                } else {
                    string += "<img src=\"file.png\"/>"
                }
                let name = json[i].substring(json[i].lastIndexOf("/") + 1)

                string += "<text class=\"name_text\">" + name + "</text>"
                string += "</a>"
                // string += "<a href="+json[i]+" target=\"_blan\"><img style=\"width:100px;margin:10px;display:block\" src=\""+json[i] ;
                // string += "\"><text></text></a>";
            }
            imageParent.innerHTML = string;
        }
    </script>

    <script type="text/javascript" src="./getrequest.js"></script>
    <script type="text/javascript">
        getRequest(proto + location.host
            + "/getImages", "", function (res) {
                console.log(res)
                // console.log(JSON.parse(res))
                parseResult(res)
            })
    </script>
</body>

</html>